import styles from './styles.module.scss'
import List from '../List'
import RenderJudge from '@/components/RenderJudge'
import Link from 'next/link'
import { RightOutline, LeftOutline } from 'antd-mobile-icons'
const NewsDetail = ({ newsDetail, typeItem }) => {
  console.log(newsDetail)
  return (
    <main className={styles.h5news}>
      <List.NewsBreadcrumb en={typeItem?.en} text={typeItem?.newsTypeName} />
      <article>
        <h1>{newsDetail?.news?.newsTitle}</h1>
        <p>发表于:&nbsp;&nbsp;{newsDetail?.news?.publishDate}</p>
        <div dangerouslySetInnerHTML={{ __html: newsDetail?.news?.content }}></div>
      </article>
      <footer>
        <RenderJudge value={newsDetail?.previous?.id} active={
          <Link href={`/news/` + newsDetail?.previous?.id}>
            <a>
              <span arrow='1' style={{ width: '2.5rem' }}>
                <LeftOutline style={{ fontSize: '0.24rem' }} />
                <i>上一条</i>
              </span>
              <span className='textoverone'>{newsDetail?.previous?.newsTitle}</span>
            </a>
          </Link>
        } />
        <RenderJudge value={newsDetail?.next?.id} active={
          <Link href={`/news/` + newsDetail?.next?.id}>
            <a style={{ marginLeft: 'auto' }}>
              <span arrow='1' style={{ width: '2.5rem' }}>
                <i style={{ marginLeft: 'auto' }}>下一条</i>
                <RightOutline style={{ fontSize: '0.24rem' }} />
              </span>
              <span className='textoverone'>{newsDetail?.next?.newsTitle}</span>
            </a>
          </Link>
        } />
      </footer>
    </main>
  )
}

export default NewsDetail